<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue的基础知识</title>
</head>
<body>
  <div id="app">
    <h3>{{oldname}}</h3>
    <h2>{{username}}</h2>
    <!-- 
    change事件表示，焦点失去的时候执行
    <input type="text" name="" id="uname" @change="changeVal"> 
    -->
    <input type="text" name="" id="uname" @input="inputVal($event,'ok:')"> 
    <!-- 
    click事件表示点击的时候执行
    <input type="button" value="修改" v-on:click="btn"> 
    -->
     <input type="button" value="修改" @click="btn">
  </div>
  <script src="vue.js"></script>
  <script>
    const vm  = new Vue({
      el:"#app",
      data:{
        username:"张三",
        oldname:""
      },
      methods:{
        //methods里面写的就是所有的方法信息
        btn() {
          //找到ele这个元素
          let ele = document.querySelector("#uname")
          if(ele) {
            this.username = ele.value;
          }
        },
        changeVal(e) {
          //此处的this不是input这个输入框，而是vue的vm对象
          // alert(this.value)
          //e.target就是我们的表单对象
          // alert(e.target.value)
          this.username = e.target.value
        },
        inputVal(e,info) {
          if(!this.oldname) {
            this.oldname = this.username
          }
          // console.log(info);
          if(e.target.value=="") {
            this.username = this.oldname
          } else {
            this.username = info+e.target.value
            //如果为空，显示原来的username
          }
          
        }
      }
    })
  </script>
</body>
</html>